import React, {PropsWithChildren, useCallback, useEffect, useState} from 'react'
import {Text} from "@tarojs/components";
import styles from "./procurement.module.sass"
import {procurementStatusMap, QueryProcurementResponse, queryProcurements} from "../apis/ProcurementApi";
import {Pageable} from "../utils/Page";
import procurementPageStackStore from "../store/ProcurementPageStackStore";
import Taro from "@tarojs/taro";
import MyNavigationBar from "../components/MyNavigationBar";
import {Cell, Space, VirtualList} from "@nutui/nutui-react-taro";
import {YEAR_MONTH_DAY_FORMATER} from "../utils/Date";
import {observer} from "mobx-react";

export interface ProcurementProps extends PropsWithChildren {

}

const Procurement: React.FC<ProcurementProps> = ({}) => {
    const [loading, setLoading] = useState(false)
    const queryWithoutPageable = useCallback(async (pageable: Pageable) => {
        setLoading(true)
        Taro.showLoading()
        try {
            return await queryProcurements({}, pageable)
        } finally {
            setLoading(false)
            Taro.hideLoading()
        }
    }, [])

    const query = useCallback(async () => {
        const response = await queryWithoutPageable(procurementPageStackStore.pageable)
        procurementPageStackStore.appendItems(response.data)
    }, [queryWithoutPageable, ...procurementPageStackStore.pageable.toDependencyList()])

    useEffect(() => {
        query()
    }, [query]);
    return <>
    <MyNavigationBar>采购</MyNavigationBar>
    <VirtualList
        itemEqual={false}
        onScroll={() => {
            if (!procurementPageStackStore.last && !loading) {
                procurementPageStackStore.next()
            }
        }}
        list={procurementPageStackStore.list}
        itemRender={(item: QueryProcurementResponse) => {
            return <Cell style={{margin: 0}} onClick={()=>{
                Taro.navigateTo({
                    url:`/pages/procurementReturnDetail?id=${item.id}`
                })
            }}>
                <Space direction={"vertical"} style={{width:"100%"}}>
                    <Space justify={"between"}>
                        <Text
                            className={styles.title}>{item.supplier.name}采购单 {"     "}</Text>
                        <Text className={styles.extra}>{procurementStatusMap[item.status]}</Text>
                    </Space>
                    {!!item.note&&
                        <Text className={styles.description}>{item.note}</Text>
                    }

                    <Space className={styles.description}>
                        <Text>{`${item.goodsKindAmount}个单品`}</Text>
                        <Text>{`${item.createdBy.name}创建于${item.createdDateTime
                            .toLocalDate()
                            .format(YEAR_MONTH_DAY_FORMATER)}`}</Text>
                    </Space>
                </Space>
            </Cell>;
        }}/>
    {/*{ employeeStore.hasAuthority("c") && <FloatButton icon={<Add/>} onClick={async () => {*/}
    {/*    async function doCreateMarketOrder(){*/}
    {/*        await createMarketOrder(marketId!!).then(response => {*/}
    {/*            const detail:MarketOrderDetailResponse = {*/}
    {/*                id: response.data,*/}
    {/*                createdBy: {...employeeStore.employee!!},*/}
    {/*                createdDateTime: OffsetDateTime.now(),*/}
    {/*                market:{*/}
    {/*                    id:marketId!,*/}
    {/*                    name:marketName!,*/}
    {/*                },*/}
    {/*                number:"",*/}
    {/*                items:[]*/}
    {/*            }*/}
    {/*            marketOrderInMarketPageStackStore.appendItemByDetail(detail)*/}
    {/*            if(marketPageStackStore.detail){*/}
    {/*                marketPageStackStore.updateDetail({*/}
    {/*                    ...marketPageStackStore.detail,*/}
    {/*                    orderAmount:marketPageStackStore.detail.orderAmount+1,*/}
    {/*                })*/}
    {/*            }*/}
    {/*            Taro.navigateTo({*/}
    {/*                url: `/pages/marketOrderDetail?id=${response.data}`*/}
    {/*            })*/}
    {/*        });*/}
    {/*    }*/}
    {/*    const waitSubmittedOrder = marketOrderInMarketPageStackStore.list.find(it => it.status === "WAIT_SUBMIT")*/}
    {/*    if (!!waitSubmittedOrder) {*/}
    {/*        let result = (await Taro.showModal({*/}
    {/*            title: `新增卖场订单确认`,*/}
    {/*            content: `${waitSubmittedOrder.createdBy.id===employeeStore.employee?.id?"你":waitSubmittedOrder.createdBy.name}已经在${(waitSubmittedOrder.createdDateTime).format(DATE_WITH_HOUR_MINUTE_FORMATER)}创建的订单,且尚未提交,是否需要创建一个新的订单?`,*/}
    {/*            confirmText:"仍然创建",*/}
    {/*        }))*/}
    {/*        if (result.confirm){*/}
    {/*            await doCreateMarketOrder()*/}
    {/*        }*/}
    {/*    }else {*/}
    {/*        await doCreateMarketOrder()*/}
    {/*    }*/}


    {/*}}/>}*/}
    </>
}

export default observer(Procurement)


